<template>
	<view class="main-record" :style="{height:containerHeight + 'px'}">
		<view class="content" ref="targetDom" id="targetDom">
			<image id="img" :src="bgImg" mode="scaleToFill" class="cover_img" @load="imageLoad"
				:style="{height:containerHeight + 'px'}"></image>
			<view class="info-top box box-tb box-pack-center box-align-center">
				<h3>劳动教育学情报告</h3>
				<i class="bg"></i>
				<view class="student-name">
					{{info.name}}
				</view>
				<view class="student-number">
					{{info.sn !=null?info.sn:``}}
				</view>
				<view class="student-class-name">
					{{`${info.zymc}·${info.bjmc}`}}
				</view>
			</view>
			<view class="course_info box box-tb box-pack-start">
				<view class="info_title">
					<view class="line"></view>
					<view class="">
						课程学习
					</view>
					<view class="line"></view>
				</view>
				<view class="mt10 font-10"
					style="overflow: hidden;width: 100%;text-overflow: ellipsis;white-space: nowrap;">
					学习课程：{{info.cousNameList.length == 0?`无`:info.cousNameList.toString()}}
				</view>
				<view class="mt10 font-10">
					课程数量：共学习{{info.cousCnt}}个课程
				</view>
				<view class="mt10 font-10">
					课程视频：{{info.cousVideoCnt}}个
				</view>
				<view class="mt10 font-10">
					学习时间：累计{{info.learnedTime}}
				</view>
			</view>
			<view class="course_info box box-tb box-pack-start">
				<view class="info_title">
					<view class="line"></view>
					<view class="">
						实践任务
					</view>
					<view class="line"></view>
				</view>
				<view class="mt10 font-10">
					实践数量：共完成{{info.finishedLdsjCnt}}个
				</view>
				<view class="mt10 font-10">
					批阅数量：{{info.pyCnt}}次
				</view>
				<view class="mt10 font-10"
					style="overflow: hidden;width: 100%;text-overflow: ellipsis;white-space: nowrap;">
					批阅老师：{{info.pyTrName.length == 0?`无`:info.pyTrName.toString()}}
				</view>
			</view>

			<view class="foot">
				<view class="cont">
					<view class="tr" v-if="schoolInfo.officialSeal==''||schoolInfo.officialSeal ==null">
						五育通教育研究院
					</view>
					<view class="tr" v-else>
						{{schoolInfo.officialSeal}}
					</view>
					<view class="tr">
						
						{{schoolInfo.secondname == null?` 三协同劳动教育教学联盟校学术服`:schoolInfo.secondname}}
					</view>
					<view class="tr">
						{{info.date}}
					</view>
				</view>
			</view>
			<view class="img">
				<img style="width: 70px;height: 70px;" :src="imgUrl" alt=""
					v-if="schoolInfo.officialSeal==''||schoolInfo.officialSeal ==null">
				<img style="width: 70px;height: 70px;" :src="schoolInfo.officialSealUrl" alt="" v-else>
			</view>
		</view>
		<!-- <u-button @click="downLoad">下载</u-button> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				containerHeight: 0,
				user: uni.getStorageSync('user'),
				bgImg: "https://yhlyy.oss-cn-beijing.aliyuncs.com/0DB7B5B67B1F4267A4CF61A279364994img.png?Expires=4837160002&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=WAC5inpcv1Ttn%2F0otySpK6lzBVs%3D",
				info: {
					name: '',
					sn: null,
					zymc: '',
					bjmc: '',
					cousNameList: [],
					cousCnt: 0,
					cousVideoCnt: 0,
					learnedTime: 0,
					finishedLdsjCnt: 0,
					pyCnt: 0,
					pyTrName: [],
					date: ''
				},
				schoolInfo: {
					officialSeal: '',
					officialSealUrl: ''
				},
				xnxq: {
					curxn: '',
					curxq: ''
				},
				imgUrl: 'https://yhlyy.oss-cn-beijing.aliyuncs.com/1810DF96C0654594839B149634C4633E%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230516004551.png?Expires=4837769159&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=cNJP29vYI%2FGb3Fo3oNkkOxNNhHg%3D'
			}
		},
		onLoad() {
			this.getXnXq()
		},
		methods: {
			imageLoad: function(e) {
				var _this = this;
				/* 图片容器的id */
				var id = e.currentTarget.id;

				/* 查询图片容器的宽度 */
				const query = uni.createSelectorQuery().in(this);
				query.select('#' + id).boundingClientRect(data => {
					/* 计算图片容器的宽度 */
					_this.containerHeight = data.width * e.detail.height / e.detail.width;
					/* 强制刷新。如不强制刷新，则图片容器高度不会改变 */
					_this.$forceUpdate();
				}).exec();
			},
			getData(curxn,curxq) {
				let opts = {
					url: '/tongji/xqbg',
					method: 'post'
				};
				let params = {
					userid: this.user.id,
					xn: curxn,
					xq: curxq
				};
				console.log("打印信息======");
				console.log(params);
				this.$api.post(opts, params).then(res => {
					console.log(res);
					if (res.code == 0) {
						this.info = res.data
					}

				})
			},

			getXnXq() {
				let opts = {
					url: '/comm/getCurXnxq',
					method: 'post'
				};
				this.$api.RPost(opts).then(res => {
					console.log("打印学年学期======");
					console.log(res);
					if (res.code == 0) {
						this.xnxq = res.curxnxq
						this.getByIdData()
						this.getData(res.curxnxq.curxn,res.curxnxq.curxq)
					}

				})
			},
			getByIdData() {
				let opts = {
					url: '/yschool/getById',
					method: 'post'
				};
				let params = {
					id: this.user.schoolId,
				};
				console.log("打印学校信息========");
				console.log(params);
				this.$api.post(opts, params).then(res => {
					console.log(res);
					if (res.code == 0) {
						this.schoolInfo = res.school
					}

				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.mt10 {
		margin-top: 5px;
	}

	.main-record {
		position: relative;
		box-sizing: border-box;
		width: 100%;
		// height: 553px;
		// background: url(https://yhlyy.oss-cn-beijing.aliyuncs.com/0DB7B5B67B1F4267A4CF61A279364994img.png?Expires=4837160002&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=WAC5inpcv1Ttn%2F0otySpK6lzBVs%3D);
		background-size: 100%;
		background-repeat: no-repeat;
		border: 1px solid transparent;

		.content {
			padding: 0 15%;

			.info-top {
				margin-top: 50px;

				.bg {
					margin-top: 6px;
					display: block;
					width: 60%;
					height: 15px;
					background: url(https://yhlyy.oss-cn-beijing.aliyuncs.com/35B220B2516F4A87BE659570EEA5B1BAline_my.png?Expires=4837241222&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=cegN%2B4ZiqPaFLYZKJp%2BYe%2Bpdqps%3D);
					background-size: 100%;
					background-repeat: no-repeat;
				}

				h3,
				.student-name {
					color: #3362AD;
				}

				h3 {
					font-weight: bold;
					font-size: 18px;
				}

				.student-name {
					font-size: 32rpx;
				}
			}

			.course_info {
				margin-top: 10px;

				.font-10 {
					font-size: 20rpx;
				}

				.line {
					margin-top: 3px;
					margin-bottom: 3px;
					width: 47px;
					height: 1px;
					background: #648AC7;
					opacity: 0.78;
					border-radius: 50%;
				}

				.info_title {
					font-size: 24rpx;
					color: #426CB4;
				}
			}

			.foot {
				position: absolute;
				bottom: 9%;
				right: 18%;

				.cont {
					position: relative;
					font-size: 20rpx;
				}
			}
		}
	}

	.tr {
		text-align: right;
	}

	.img {
		position: absolute;
		top: 240rpx;
		right: 42px;
	}

	.cover_img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: -1;
	}
</style>
